
<!DOCTYPE html>
<html>
    <head>
        <title>ms-class</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../avalon.js"></script>
        <style>
            .ms-class div{
                display:inline-block;
                width:200px;
                height:100px;
                border: 1px solid  black;
            }
            .active{
                background: black;
                color: white;
            }
            .bgRed {
                background:palegoldenrod;
            }
            .hover{
                background: red;
                color: white;
            }
            .green{
                 background: green;
            }
        </style>
        <script type="text/javascript">
        
            var model = avalon.define({
                $id: "test",
                w: 500,
                h: 200,
                bottom: true,
                num: "00",
                className: "点我",
                array: [],
                add: function(){
                    model.array.push(1)
                },
                remove: function(){
                    model.array.pop()
                },
                changeClassName: function() {
                    model.num = (100 * Math.random()).toFixed(0);
                    model.className = this.className
                }
            })
        </script>
    </head>
    <body ms-controller="test" class="ms-class">
        <div ms-active="active" >测试:active</div>
        <div ms-hover="hover" >测试:hover</div>
        <div ms-class="bgRed width{{w}} height{{h}}" ms-css-width="h">
            类名通过插值表达式生成<br/>
            {{w}} * {{h}}<br/>
            <input data-duplex-event="change" ms-duplex="h">
        </div>
        <p><button type="button" ms-class="test{{num}}" ms-click="changeClassName">{{className}}</button></p>
        <div ms-class="green: array.length">
            <button ms-click="add" type="button">add</button><button ms-click="remove" type="button">remove</button>
        </div>
    </body>
</html>
